<template>
  <div class="bundle">
    <el-container>
      <el-container>
        <el-header height="50px">
          <h3>特惠券包创建</h3>
        </el-header>
        <el-main>
          <el-form ref="bundle" :model="bundle" :rules="formRules" label-width="140px">
            <el-row>基本信息：</el-row>
            <el-row style="margin-top: 10px;">
              <el-col :span="7">
                <el-form-item label="特惠券包CODE：" prop="code">
                  <el-input v-model="bundle.code"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="14">
                <el-form-item label="特惠券包名称：" prop="name">
                  <el-input v-model="bundle.name" maxlength="25"></el-input>
                </el-form-item>
              </el-col>
              <!-- <el-col :span="5">
				<el-form-item label="地区码" prop="regionBlockCode">
              		<el-input v-model="bundle.regionBlockCode"></el-input>
				</el-form-item>
              </el-col>-->
            </el-row>
            <el-row>
              <el-col :span="7">
                <el-form-item label="特惠券包原价：" prop="originalPrice">
                  <el-input v-model="bundle.originalPrice"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="特惠券包卖价：" prop="sellPrice">
                  <el-input v-model="bundle.sellPrice"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="特惠券包库存：" prop="inventoryQty">
                  <el-input v-model="bundle.inventoryQty"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="7">
                <el-form-item label="活动开始：" prop="showTime">
                  <el-date-picker
                    type="datetime"
                    placeholder="开始日期"
                    v-model="bundle.showTime"
                    style="width: 100%;"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="活动结束：" prop="finishTime">
                  <el-date-picker
                    placeholder="结束时间"
                    type="datetime"
                    v-model="bundle.finishTime"
                    style="width: 100%;"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="支付时间：" prop="orderTime">
                  <el-date-picker
                    placeholder="支付时间"
                    type="datetime"
                    v-model="bundle.orderTime"
                    style="width: 100%;"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="7">
                <el-form-item label="设置在售或下架：" prop="status">
                  <el-radio-group v-model="bundle.status">
                    <el-radio label="2">在售</el-radio>
                    <el-radio label="0">下架</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="特惠券包列表图：">
                  <el-upload
                    class="upload-demo"
                    :action="uploadUrl()"
                    multiple
                    :limit="1"
                    :on-success="smallFileSuccess"
                    :file-list="smallFileList"
                  >
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="特惠券包详情图：">
                  <el-upload
                    class="upload-demo"
                    :action="uploadUrl()"
                    multiple
                    :limit="1"
                    :on-success="bigFileSuccess"
                    :file-list="BigFileList"
                  >
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="14">
                <el-form-item label="规则说明：" prop="description">
                  <el-input
                    type="textarea"
                    :rows="10"
                    placeholder="请输入内容"
                    v-model="bundle.description"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <template>
              <div class="TestWord">
                <el-button type="primary" @click="addLine">添加行数</el-button>
                <el-table :data="tableData" style="width: 100%">
                  <el-table-column prop="bookname" label="绑定券id">
                    <template slot-scope="scope">
                      <el-input
                        v-model="scope.row.couponId"
                        placeholder="绑定券id"
                        @change="handlerCouponId"
                      ></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="bookvolume" label="绑定券数量">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.couponNum" placeholder="绑定券数量"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="couponName" label="绑定券名称" width="150"></el-table-column>
                  <el-table-column prop="bookbuytime" label="操作">
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        type="danger"
                        v-if="!scope.row.editing"
                        icon="el-icon-delete"
                        @click="handleDelete(scope.$index, scope.row)"
                      >删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </template>
						<el-row style="margin-top: 30px; text-align: center;">
							<el-button type="primary" @click="createBundle">保存</el-button>
						</el-row>
          </el-form>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import axios from "axios";
import { isInteger, checkFloat } from "@/utils/validate";
const BASE_URL = process.env.VUE_APP_API_BASE_URL;
import api from "@/api";

export default {
  data() {
    return {
      currentMenu: "",
      bundle: { status: "0" },
      smallFileList: [],
      tableData: [],
      BigFileList: [],
      editFormVisible: false,
      editForm: {},
      //   表单验证
      formRules: {
        code: [
          {
            required: true,
            message: "特惠券包CODE不能为空",
            trigger: "blur"
          }
        ],
        name: [
          {
            required: true,
            message: "特惠券包名称不能为空",
            trigger: "blur"
          }
        ],
        // regionBlockCode: [
        //   {
        //     required: true,
        //     message: "地区码不能为空",
        //     trigger: "blur"
        //   }
        // ],
        originalPrice: [
          {
            required: true,
            message: "价格不能为空",
            trigger: "blur"
          },
          {
            validator: checkFloat,
            trigger: "blur"
          }
        ],
        sellPrice: [
          {
            required: true,
            message: "价格不能为空",
            trigger: "blur"
          },
          {
            validator: checkFloat,
            trigger: "blur"
          }
        ],
        inventoryQty: [
          {
            required: true,
            message: "库存不能为空",
            trigger: "blur"
          },
          {
            validator: isInteger,
            trigger: "blur"
          }
        ],
        showTime: [
          {
            required: true,
            message: "时间不能为空",
            trigger: "blur"
          }
        ],
        finishTime: [
          {
            required: true,
            message: "时间不能为空",
            trigger: "blur"
          }
        ],
        orderTime: [
          {
            required: true,
            message: "时间不能为空",
            trigger: "blur"
          }
        ],
        status: [
          {
            required: true,
            message: "设置在售或下架不能为空",
            trigger: "blur"
          }
        ],
        description: [
          {
            required: true,
            message: "描述不能为空",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    createBundle() {
      this.bundle.bundleSubList = this.tableData;
      console.log(this.bundle.bundleSubList);
      if (
        this.bundle.imageSmall == undefined ||
        this.bundle.imageBig == undefined
      ) {
        this.$alert("图片不能为空！");
        return;
      }
      if (
        this.bundle.bundleSubList == undefined ||
        this.bundle.bundleSubList.length == 0
      ) {
        this.$alert("绑定券信息不能为空！");
        return;
      }
      this.$refs["bundle"].validate(valid => {
        if (valid) {
          var param = JSON.stringify(this.bundle);
          api.bundle.createBundle(JSON.parse(param)).then(res => {
            if (res.data.code == 200) {
              this.$alert("新建成功！");
              this.$router.push({ path: "/bundle" });
            }
          });
          return true;
        } else {
          this.$alert("输入有误请检查后再提交！");
          return "false";
        }
      });
    },
    smallFileSuccess(res, file) {
      console.log(res.data);
      this.bundle.imageSmall = res.data;
    },
    bigFileSuccess(res, file) {
      console.log(res.data);
      this.bundle.imageBig = res.data;
    },
    uploadUrl: function() {
      return `${BASE_URL}/modules/web/common/upload`;
    },
    typeFormat: function(row, column, cellValue) {
      switch (cellValue) {
        case 0:
          return "会员优惠券";
        case 1:
          return "免费券";
        case 2:
          return "满减优惠券";
        case 3:
          return "商品立减券";
        default:
          break;
      }
    },
    addLine() {
      //添加行数
      var newValue = {};
      this.tableData.push(newValue);
    },
    handleDelete(index) {
      //删除行数
      this.tableData.splice(index, 1);
    },
    save() {
      //这部分应该是保存提交你添加的内容
      console.log(JSON.stringify(this.tableData));
    },
    handlerCouponId(value) {
      api.bundle.handlerCouponId(value).then(res => {
        if ((res.data.code = 200)) {
          if (res.data.data == undefined) {
            this.$alert("绑定券信息不存在！");
            return;
          }
          for (var i = 0; i < this.tableData.length; i++) {
            if (this.tableData[i].couponId == value) {
              this.tableData[i].couponName = res.data.data.couponName;
            }
          }
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
	.bundle {
		.el-upload__tip {
			line-height: 1.5;
		}
	}
</style>